<template>
  <div class="table_data">
    <WarnHeader @onwarnSearchEvent="search" />
    <el-table
      @row-click="getwarninfo"
      :data="syswarnlist"
      :cell-style="{'text-align':'center'}"
      :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}"
    >
      <el-table-column width="150" show-overflow-tooltip prop="tunnelName" label="隧道名称"></el-table-column>
      <el-table-column width="110" show-overflow-tooltip prop="tunnelSectionName" label="断面名称"></el-table-column>
      <el-table-column width="150" show-overflow-tooltip label="预警类型">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.warnType == 1" type="warning">拱顶下沉预警</el-tag>
          <el-tag v-if="scope.row.warnType == 2" type="info">拱脚下沉预警</el-tag>
          <el-tag v-if="scope.row.warnType == 3" type="success">周边收敛预警</el-tag>
          <el-tag v-if="scope.row.warnType == 4" type="success">超前地质预报预警</el-tag>
          <el-tag v-if="scope.row.warnType == 5" type="success">初支施工质量预警</el-tag>
          <el-tag v-if="scope.row.warnType == 6" type="success">二衬施工质量预警</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" show-overflow-tooltip prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="info">未处理</el-tag>
          <el-tag v-if="scope.row.status == 2" type="wanring">正在处理</el-tag>
          <el-tag v-if="scope.row.status == 3" type="success">已处理</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="100" show-overflow-tooltip prop="monitoringPoint" label="预警值"></el-table-column>
      <el-table-column width="200" show-overflow-tooltip prop="warnMessage" label="预警内容"></el-table-column>
      <el-table-column width="200" show-overflow-tooltip prop="createTime" label="创建时间"></el-table-column>
      <el-table-column show-overflow-tooltip label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-chat-round"
            @click="handleEdit(scope.$index, scope.row)"
          >短信通知</el-button>
          <el-button
            size="mini"
            type="warning"
            icon="el-icon-delete"
            @click="xiaojing(scope.$index, scope.row)"
          >消警</el-button>
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="预警详情查看" :visible.sync="dialogVisible" width="50%" :before-close="handleClose">
      <el-tabs v-model="activeName">
        <el-tab-pane label="拱顶下沉" name="first">
          <el-table :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}" :data="monitorMeasurements" style="width: 100%" height="250">
            <el-table-column
              :formatter="formatDate"
              fixed
              prop="measurementTime"
              label="测量日期"
              width="100"
            ></el-table-column>
            <el-table-column prop="numTime" label="累计时间" width="100"></el-table-column>
            <el-table-column prop="headerValue" label="测量值" width="120"></el-table-column>
            <el-table-column prop="headerTodaySink" label="当日下沉值" width="120"></el-table-column>
            <el-table-column prop="headerNumSink" label="累计" width="300"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="拱脚下沉" name="second">
          <el-table :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}" :data="monitorFoots" style="width: 100%" height="250">
            <el-table-column
              :formatter="formatDate"
              fixed
              prop="createDate"
              label="测量日期"
              width="100"
            ></el-table-column>
            <el-table-column prop="numTime" label="累计时间" width="100"></el-table-column>
            <el-table-column prop="footValue" label="测点1测量值" width="150"></el-table-column>
            <el-table-column prop="footTodaySink" label="测点1当日下沉值" width="150"></el-table-column>
            <el-table-column prop="footNumSink" label="测点1累计下沉值" width="150"></el-table-column>
            <el-table-column prop="foot2Value" label="测点2测量值" width="150"></el-table-column>
            <el-table-column prop="foot2TodaySink" label="测点2当日下沉值" width="150"></el-table-column>
            <el-table-column prop="foot2NumSink" label="测点2累计下沉值" width="150"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="周边收敛" name="third">
          <el-table :data="monitorPeripheries" style="width: 100%" height="250">
            <el-table-column :formatter="formatDate" fixed prop="createTime" label="日期" width="100"></el-table-column>
            <el-table-column prop="peripheryValue" label="SL1-SL2测量值" width="150"></el-table-column>
            <el-table-column prop="peripheryTodaySink" label="SL1-SL2当日位移" width="150"></el-table-column>
            <el-table-column prop="peripheryNumSink" label="SL1-SL2累计位移" width="150"></el-table-column>
            <el-table-column prop="periphery2Value" label="SL3-SL4测量值" width="150"></el-table-column>
            <el-table-column prop="periphery2TodaySink" label="SL3-SL4当日位移" width="150"></el-table-column>
            <el-table-column prop="periphery2NumSink" label="SL3-SL4累计位移" width="150"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="超前地质预报" name="fourth">
          <el-table :cell-style="{'text-align':'center'}" :header-cell-style="{background: '#f8f8f9',textAlign: 'center'}" :data="advanceInfos" style="width: 100%" height="250">
            <el-table-column
              :formatter="formatDate"
              fixed
              prop="predictionTime"
              label="日期"
              width="100"
            ></el-table-column>
            <el-table-column prop="startMileage" label="开始里程" width="90"></el-table-column>
            <el-table-column prop="endMileage" label="结束里程" width="90"></el-table-column>
            <el-table-column prop="designGrade" label="设计级别" width="90"></el-table-column>
            <el-table-column prop="predictionGrade" label="预报级别" width="90"></el-table-column>
            <el-table-column prop="predictionResult" label="预报结果" width="400"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>

    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, sizes, prev, pager, next, jumper"
        :total="currentPage.total"
      ></el-pagination>
    </div>

    <!-- 分页 -->
    <WarnEditor :flag="flag" />
  </div>
</template>

<script>
import api from "../../../api";
import qs from "qs";
import WarnEditor from "./WarnEditor.vue";
import WarnHeader from "./WarnHeader.vue";
import { Drawer } from "element-ui";

export default {
  data() {
    return {
      activeName: 'first',
      direction: "rtl",
      dialogVisible: false,
      tunnelInfoChild: [],
      wId: "", // 洞幅id
      syswarnlist: [],
      flag: false,
      value: "--全部--",
      currentPage: {
        pageNo: 1,
        total: 0,
      },
      tid: "",
      status: "",
      monitorMeasurements: [],
      monitorFoots: [],
      monitorPeripheries: [],
      advanceInfos: [],
    };
  },
  components: {
    WarnEditor,
    WarnHeader,
    "el-drawer": Drawer,
  },
  mounted() {
    this.http(1);
    this.$bus.$on("onRefreshwarn", (flag) => {
      this.http(1);
    });
  },
  methods: {
    search(data) {
      this.tid = data.tid;
      this.status = data.status;
      this.http(this.currentPage.pageNo, data.tid, data.status);
    },
    http(page, t, s) {
      api
        .WarnfindByAll({ page, tid: t, status: s })
        .then((res) => {
          if (res.data.code == 2001) {
            this.syswarnlist = res.data.data.records;
            this.currentPage.total = parseInt(res.data.data.total);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    handleEdit(index, row) {
      api.WarnsendMessage({ id: row.id }).then((res) => {
        if (res.data.code == 2001) {
          this.$message({
            type: "success",
            message: "发送成功!",
          });
          this.http(this.currentPage.pageNo);
        }
      });
    },
    handleDelete(index, row) {
      let data = {
        id: row.id,
      };
      this.$confirm("此操作将永久删除预警记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "del-model",
        type: "warning",
      })
        .then(() => {
          api
            .WarndeleteById(qs.stringify(data))
            .then((res) => {
              if (res.data.code == 2001) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                // 视图重绘
                this.http(1);
              } else {
                this.$message({
                  type: "fail",
                  message: "删除失败!",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleCurrentChange(val) {
      this.http(val, this.tid);
    },
    xiaojing(index, row) {
      api.Warnsendxiaojing({ id: row.id }).then((res) => {
        if (res.data.code == 2001) {
          this.$message({
            type: "success",
            message: "消警成功!",
          });
          this.http(this.currentPage.pageNo);
        } else {
          this.$message({
            type: "fail",
            message: "消警失败!",
          });
        }
      });
    },
    getwarninfo(row) {
      this.dialogVisible = true;
      api.Warngetwarninfo({ id: row.id }).then((res) => {
        if (res.data.code == 2001) {
          console.log(res.data);
          this.monitorMeasurements = res.data.data.monitorMeasurements;
          this.monitorFoots = res.data.data.monitorFoots;
          this.monitorPeripheries = res.data.data.monitorPeripheries;
          this.advanceInfos = res.data.data.advanceInfos;
        }
      });
    },
    handleClose(done) {
      this.dialogVisible = false;
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
  },
};
</script>

<style scoped>
.table_data {
  margin-top: 20px;
}
</style>